:root {
  --m78: 20.8vw;
  --m175: 46.66vw;
  --186: 49.6vw;
  --m215:57.33vw;

  --pc78: 97.5px;
  --pc175: 218.75px;
  --pc186: 232.5px;
  --pc215: 268.75px;
}
.guide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 100;
}
.down {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: absolute;
  bottom: var(--m40);
  left: 50%;
  width: var(--m215);
  text-align: center;
  transform: translate(-50%, -50%);
}

.downBtn {
  position: relative;
  width: var(--m20);
  height: var(--m20);
  animation: arrow-down 1.4s infinite linear;
  z-index: 101;
  background: url(../images/btn-down.svg) no-repeat 50% / contain;
}

.downText {
  width: var(--m215);
  height: var(--m14);
  font-size: var(--m13);
  font-family: Montserrat-Regular;
  font-weight: 400;
  color: #FFFFFF;
  line-height: var(--m14);
}

.ok {
  position: absolute;
  z-index: 111;
}

.okBtn {
  width: var(--m40);
  height: var(--m20);
  z-index: 101;
  text-align: center;
  background: url(../images/ok-btn-bg.svg) no-repeat 50% / contain;
  font-size: var(--m11);
  font-family: Montserrat-Light;
  font-weight: 300;
  color: #FFFFFF;
  line-height: var(--m20);
  color: #fff;
}

.okText {
  width: var(--m78);
  height: var(--m16);
  margin: 0 0 var(--m8);
  font-size: var(--m13);
  font-family: Montserrat-Regular;
  font-weight: 400;
  color: #FFFFFF;
  line-height: var(--m16);
}
.ok.barCode {
  width: var(--m120);
  height: var(--m80);
  bottom: var(--m50);
  right: var(--m50);
}
.ok.qrCode {
  width: var(--m140);
  height: var(--m100);
  top: var(--186);
  right: 0;
  .okCircle {
    bottom: var(--m15);
    right: var(--m20);
  }
  .qrcodeAngle {
    position: absolute;
    right: 0;
    bottom: 0;
  }
}
// .ok.qrCode {
//   .okCircle {
//     &:after {
//     }
//   }
// }
.okBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  position: absolute;
  bottom: 0;
  right: 0;
  height: var(--m80);
  width: var(--m32);
}
.okCircle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--m16);
  height: var(--m16);
  background: rgba(255,255,255,.2);
  border-radius: var(--m16);
  .circle {
    width: var(--m6);
    height: var(--m6);
    background: #FFFFFF;
    border-radius: var(--m6);
  }
  &:after {
    position: absolute;
    top: var(--m7);
    left: var(--m7);
    width: var(--m2);
    height: var(--m42);
    content: ' ';
    background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
  }
}
.ticket {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--m32);
  height: var(--m32);
  background: #D9D9D9;
  border-radius: var(--m8) var(--m8) var(--m8) var(--m8);
  box-shadow: 0 0 var(--m20) #fff;
  img {
    width: var(--m24);
    height: var(--m24);
  }
}

@media screen and (min-width:1280px) {
  .down {
    bottom: var(--pc40);
    width: var(--pc215);
  }

  .downBtn {
    width: var(--pc20);
    height: var(--pc20);
  }

  .downText {
    width: var(--pc215);
    height: var(--pc14);
    font-size: var(--pc13);
    line-height: var(--pc14);
  }

  .okBtn {
    width: var(--pc40);
    height: var(--pc20);
    font-size: var(--pc11);
    line-height: var(--pc20);
  }

  .okText {
    width: var(--pc78);
    height: var(--pc16);
    margin: 0 0 var(--pc8);
    font-size: var(--pc13);
    line-height: var(--pc16);
  }

  .ok.barCode {
    width: var(--pc120);
    height: var(--pc80);
    bottom: var(--pc40);
    right: var(--pc40);
  }

  .ok.qrCode {
    width: var(--pc140);
    height: var(--pc100);
    top: var(--pc186);

    .okCircle {
      bottom: var(--pc15);
      right: var(--pc20);
    }

  }

  .okBox {
    height: var(--pc80);
    width: var(--pc32);
  }

  .okCircle {
    width: var(--pc16);
    height: var(--pc16);
    border-radius: var(--pc16);

    .circle {
      width: var(--pc6);
      height: var(--pc6);
      border-radius: var(--pc6);
    }

    &:after {
      top: var(--pc7);
      left: var(--pc7);
      width: var(--pc2);
      height: var(--pc42);
    }
  }

  .ticket {
    width: var(--pc32);
    height: var(--pc32);
    border-radius: var(--pc8) var(--pc8) var(--pc8) var(--pc8);
    box-shadow: 0 0 var(--pc20) #fff;

    img {
      width: var(--pc24);
      height: var(--pc24);
    }
  }
}

@keyframes arrow-down {
  0% {
    transform: translate(-50%, 20px);
  }

  50% {
    transform: translate(-50%, 13px);
  }

  100% {
    transform: translate(-50%, 20px);
  }
}